<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>个人简介</title>
    <link href="main.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="container">
    <div class="content" id="personal"><!--包含所有主要内容，下滑或点击跳转查看-->
        <div class="mainmenu"><!--右部菜单导航栏，点击跳转指定位置-->
        <ul>
            <li><a href="#personal">首页</a></li>
            <li><a href="#ability">专业技能</a></li>
            <li><a href="#hobby">兴趣爱好</a></li>
            <li><a href="#connect">联系我</a></li>
        </ul>
        </div>
        <div class="welcome">
            <span>Hello!</span>
            <span>Welcome to my world!</span>
        </div>
        <div class="midwrap1"><!--第一页-->
            <div class="personal"><!--个人信息-->
                <a><span>About me</span></a>
                <ul>
                    <li><span>姓名：邓喆</span></li>
                    <li><span>年龄：21</span></li>
                    <li><span>学历：本科</span></li>
                    <li><span>院校：九江学院</span></li>
                    <li><span>专业：软件工程</span></li>
                    <li><span>家乡：江西赣州</span></li>
                </ul>
                <div class="photo">
                    <img src="img/photo.png">
                </div>
            </div>
        </div>
        <div class="midwrap2" id="ability">
            <div class="ability">
                <h3>专业技能</h3>
                <ul><!--关于专业技能掌握情况-->
                    <li><img src="img/ps.png"></li>
                    <li><img src="img/MS OFFICE.png"></li>
                    <li><img src="img/PYTHON.png"></li>
                    <li><img src="img/SQL.png"></li>
                </ul>
            </div>
        </div>
        <div class="midwrap3" id="hobby">
            <div class="hobby">
                <h3>兴趣爱好</h3>
                <div class="show"><!--展示三张图片-->
                    <ul><!--图片为173*260px 约为长高比为：2比3-->
                        <li><span>篮球</span><img src="img/ball.png"></li>
                        <li><span>跑步</span><img src="img/run.png"></li>
                        <li><span>计算机</span><img src="img/codding.png"></li>
                        <li><span>学习</span><img src="img/study.png"></li>
                    </ul>
                    <span class="words">生命在于运动 学习使我快乐</span>
                </div>
            </div>
        </div>
        <div class="foot" id="connect">
            <div class="call">
                <h3>与我联系</h3>
                <ul>
                    <li><a><img src="img/phone.png"></a><span>Tell：13766363615</span></li>
                    <li><a><img src="img/e-mail.png"></a><span>E-mail：848123406@qq.com</span></li>
                    <li><a><img src="img/wewchat.png"></a><span>Wechat：d13766363615</span></li>
                </ul>
            </div>
        </div>
    </div>
</div><!--外层大容器-->
</body>
</html>